<script>
import { onUpdated, reactive } from "vue";
import { public_status } from "../store/public_status";
import { getShopData, getShopData_index } from "../api/index";
export default {
  setup() {
    // # 数据中心
    let data = reactive({
      // # tabs标题数据
      categoryList: [
        {
          name: "短袖",
          iconName: "icon-banxiuSVG",
        },
        {
          name: "牛仔裤",
          iconName: "icon-niuzikuSVG",
        },
        {
          name: "运动裤",
          iconName: "icon-yundongkuSVG",
        },
        {
          name: "卫衣",
          iconName: "icon-weiyiSVG",
        },
        {
          name: "长袖",
          iconName: "icon-changxiuSVG",
        },
        {
          name: "羽绒服",
          iconName: "icon-yurongfuSVG",
        },
        {
          name: "外套",
          iconName: "icon-dongjiwaitaoSVG",
        },
        {
          name: "腰带",
          iconName: "icon-yaodai",
        },
        {
          name: "袜子",
          iconName: "icon-Sock",
        },
        {
          name: "领带",
          iconName: "icon-TIE",
        },
      ],
      itemIndex: 0, // # tabs下标

      shopData: null, // # 商品数据

      keyword: "短袖", // # 关键词
    });

    public_status()._isShow = true; // # 底部导航栏显示隐藏 购物车高度
    public_status().display = true; // # 底部导航栏显示隐藏 购物车高度

    // # 生命周期
    onUpdated(() => {
      public_status().display = true;
      public_status()._isShow = true;
    });

    // # 监听滚动条
    let scrollFun = (e) => {
      console.log(e.target.scrollLeft);
    };

    // # 获取数据
    getShopData()
      .then((vl) => {
        data.shopData = vl.listData;
        console.log(vl);
      })
      .catch(() => {
        getShopData_index().then((vl) => {
          data.shopData = vl.listData;
        });
      });

    // # 搜索
    let search = (e) => {
      data.keyword = e.target.value;
    };

    return {
      data,
      scrollFun,
      search,
    };
  },
};
</script>

<template>
  <div class="categoryView">
    <!-- 头部 -->
    <header class="header">
      <div class="left">
        <div class="title">
          <div class="text">Selection</div>
          <div class="logo">
            <i class="iconfont icon-jiantouxia"></i>
          </div>
        </div>
        <div class="tips">
          <i class="iconfont icon-fenlei2"></i>
          分类 <span>筛选</span>
        </div>
      </div>
      <div class="right">
        <div class="box1"></div>
        <div class="box2">
          <div class="text">
            <span>预约</span>
            <i class="iconfont icon-jiaohuan"></i>
          </div>
        </div>
      </div>
    </header>
    <!-- 头部 -->

    <!-- 搜索框 -->
    <div class="search">
      <div class="search_box">
        <i class="iconfont icon-fangdajing"></i>
        <input type="text" placeholder="搜索" @keydown.enter="search" />
      </div>
      <div class="btn">
        <i class="iconfont icon-a-tiaokong1"></i>
      </div>
    </div>
    <!-- 搜索框 -->

    <!-- 分类列表 -->
    <div class="categoryList" @scroll="scrollFun">
      <div class="content">
        <div
          :class="['item', { con: item.name == data.keyword }]"
          v-for="(item, index) in data.categoryList"
          :key="index"
          @click="
            data.itemIndex = index;
            data.keyword = item.name;
          "
        >
          <i :class="['iconfont', item.iconName]"></i>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <!-- 分类列表 -->

    <!-- 商品列表 -->
    <div class="shop_list" v-if="data.shopData">
      <router-link
        :to="'/details?id=' + item.id"
        v-for="item in data.shopData"
        :key="item.id"
        class="item"
        v-show="data.keyword == item.shop_type[0]"
      >
        <div class="img">
          <img :src="item.imgUrl" alt="" />
        </div>
        <div class="text">
          <div class="name one-txt-cut">{{ item.title }}</div>
          <!-- <div class="tips">副标题</div> -->
          <div class="price">
            ￥<span>{{ item.price }}</span>
            <p class="oldPrice">{{ item.price + 20 }}</p>
          </div>
        </div>
        <!-- <div class="btn">
          <i class="iconfont icon-jiahao"></i>
        </div> -->
      </router-link>

      <van-divider dashed :style="{ color: '', borderColor: '#333' }">
        我可是有底线的
      </van-divider>
    </div>
    <!-- 商品列表 -->
  </div>
</template>


<style lang="scss" scoped>
.categoryView {
  // todo 头部
  > header.header {
    height: 65px;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    > .left {
      position: relative;

      > .title {
        display: flex;
        align-items: center;

        .text {
          font-size: 20px;
          font-weight: bold;
        }

        > .logo {
          width: 12px;
          height: 12px;
          line-height: 10px;
          text-align: center;

          border: 1px solid #c0c0c0;
          border-radius: 100%;

          margin-left: 5px;

          > i {
            font-size: 10px;
            color: #333;
            display: inline-block;
            transform: scale(0.8);
          }
        }
      }

      > .tips {
        font-size: 12px;
        line-height: 12px;
        margin-top: 3px;

        > span {
          color: #c0c0c0;
          display: inline-block;
          border-left: 1px solid #c0c0c0;
          padding-left: 5px;
        }

        > i {
          font-size: 12px;
          margin-right: 3px;
        }
      }
    }

    > .right {
      position: relative;

      > .box1 {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;

        width: 30px;
        height: 30px;
        border: 1px solid;
        border-color: #f0f0f0 transparent transparent #f0f0f0;
        border-radius: 3px;

        transform: rotate(45deg);

        &::after {
          content: "";
          position: absolute;
          top: 1px;
          left: 1px;
          width: 4px;
          height: 4px;
          border-radius: 100%;
          background: #444;
        }
      }

      > .box2 {
        position: relative;
        z-index: 10;
        background: #fff;

        margin-top: 5px;
        padding: 5px;

        border: 1px solid #f0f0f0;
        border-radius: 8px;

        > .text {
          position: relative;
          z-index: 11;
          display: flex;
          align-items: center;
          > span {
            font-size: 12px;
            line-height: 12px;
          }
        }

        &::after {
          content: "";
          position: absolute;
          top: 6px;
          left: 4px;

          transform: rotate(-45deg);
          width: 12px;
          height: 12px;
          border-radius: 3px;
          background-image: linear-gradient(to left bottom, #56ddb0, #fff);
        }
      }
    }
  }

  // todo 搜索框
  > .search {
    padding: 15px;
    display: flex;
    height: 42px;

    > .search_box {
      flex: 1;
      padding: 0 15px;
      height: 100%;
      background: #f9f9f9;
      border-radius: 21px;

      display: flex;
      justify-content: center;
      align-items: center;

      > input {
        background: transparent;
        font-size: 12px;
        text-align: center;
        border: 0;
        transition: width 0.3s;

        width: 50px;

        &:focus {
          width: 100%;
        }
      }
    }

    > .btn {
      width: 42px;
      height: 100%;
      margin-left: 10px;

      background: #222;
      border-radius: 15px;

      display: flex;
      justify-content: center;
      align-items: center;

      > i {
        color: #fff;
        transform: rotate(-90deg);
      }
    }
  }

  // todo 分类
  > .categoryList {
    padding-left: 15px;
    margin-bottom: 24px;
    overflow-x: scroll;
    box-sizing: border-box;
    width: 100%;
    height: 84px;

    &::-webkit-scrollbar {
      display: none;
    }

    > .content {
      width: max-content;
      height: 100%;
      display: flex;

      margin-left: 15px;

      > .item {
        box-sizing: border-box;
        width: 70px;
        display: flex;
        flex-direction: column;
        align-items: center;

        border: 2px solid transparent;
        background: #fafafa;
        border-radius: 12px;
        padding: 15px;
        color: #d1d1d1;
        margin-right: 15px;

        > i {
          font-size: 32px;
        }

        > .name {
          text-align: center;
          font-size: 12px;
          font-weight: bold;
          transform: scale(0.85);
        }

        &.con {
          border-color: #333;
          color: #333;
          font-weight: 600;
        }
      }
    }
  }

  // todo 商品列表
  > .shop_list {
    padding: 0 15px 5px;

    > .item {
      display: flex;
      background: #f9f9f9;
      border-radius: 15px;
      margin-bottom: 15px;

      position: relative;

      > .img {
        width: 115px;
        margin-right: 10px;
        border-radius: 15px;
        overflow: hidden;

        flex-shrink: 0;

        > img {
          width: 100%;
        }
      }

      > .text {
        width: 60%;
        padding-top: 25px;

        > .name {
          font-size: 16px;
          line-height: 16px;
          font-weight: bold;
          margin-bottom: 8px;
        }

        > .tips {
          font-size: 10px;
          font-weight: 700;
          color: #444;
          margin-bottom: 20px;
        }

        > .price {
          display: flex;
          align-items: flex-end;

          margin-top: 35px;
          color: #333;
          font-weight: bold;

          > span {
            font-size: 18px;
            line-height: 18px;
          }

          > .oldPrice {
            color: #c6c6c6;
            text-decoration: line-through;
            margin-left: 5px;
            font-size: 10px;
            font-weight: normal;
          }
        }
      }

      > .btn {
        position: absolute;
        right: 20px;
        bottom: 20px;

        width: 35px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        background: #56ddb0;
        border-radius: 100%;

        > i {
          font-size: 20px;
          color: #fff;
        }

        &:active {
          transform: translateY(-1px);
          background: #45c298;
        }
      }
    }
  }
}
</style>